import React from 'react';
import type { ModalSheetHeaderProps } from './types';
import { useModalSheetContext } from './ModalSheet';

/**
 * Modal Sheet Header 组件
 */
export const ModalSheetHeader: React.FC<ModalSheetHeaderProps> = ({
  title,
  showCloseButton = true,
  onClose,
  className = '',
  style,
  children,
}) => {
  const { close } = useModalSheetContext();

  const handleClose = () => {
    if (onClose) {
      onClose();
    } else {
      close();
    }
  };

  const headerClasses = ['modal-sheet__header', className]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={headerClasses} style={style}>
      <div className='modal-sheet__header-content'>
        {title && <h2 className='modal-sheet__title'>{title}</h2>}
        {children}
      </div>
      {showCloseButton && (
        <button
          type='button'
          className='modal-sheet__close-button'
          onClick={handleClose}
          aria-label='关闭'
        >
          <svg
            width='16'
            height='16'
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            strokeWidth='2'
            strokeLinecap='round'
            strokeLinejoin='round'
          >
            <line x1='18' y1='6' x2='6' y2='18' />
            <line x1='6' y1='6' x2='18' y2='18' />
          </svg>
        </button>
      )}
    </div>
  );
};

export default ModalSheetHeader;
